<template name="selfChat">
	<view class="container">
		<view class="avatar" :style="{backgroundImage:`url(${avatar})`}"></view>
		<view class="msg">
			<view class="text" v-if="sendType==1">{{text}}</view>
			<view class="img" @tap="prev" v-else>
				<image mode="aspectFill" :src="img"></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name: "selfChat",
		data() {
			return {

			}
		},
		// 此处定义传入的数据
		props: {
			sendType: { //发送消息的类型
				type: Number,
				default: 1 //默认为1就是文本消息
			},
			text: {
				type: String | Number,
				default: ''
			},
			img: {
				type: String,
				default: ''
			},
			avatar: {
				type: String,
				default: '../../static/img/defaultAvatar.png'
			}

		},
		methods: {
			prev() {
				uni.previewImage({
					urls: [this.img]
				})
			}
		},
		mounted() {
			// 在组件实例进入页面节点树时执行
			let userinfo = JSON.parse(uni.getStorageSync('info'))
			console.log(userinfo)
			if (userinfo) {
				this.avatarUrl = userinfo.headimgurl
			}
		}
	}
</script>

<style>
	.container{
	    display: flex;
	    align-items: flex-start;
	    flex-direction: row-reverse;
	    margin: 20rpx 0;
	}
	.avatar{
	    width: 100rpx;
	    height: 100rpx;
	    background-repeat:no-repeat ;
	    background-size: cover;
	    border-radius: 50%;
	    background-position: center;
	}
	.text{
	    max-width: 472rpx;
	    background-color: #19be6b;
	    margin-right:20rpx;
	    box-sizing: border-box;
	    padding: 20rpx;
	    position: relative;
	    border-radius: 10rpx;
	    word-wrap:break-word
	}
	.text::before{
	    content:"";
	    position: absolute;
	    width:0;
	    height: 0;
	    border:20rpx solid transparent;
	    border-left:20rpx solid #19be6b;
	    top:20rpx;
	    right:-34rpx;
	
	}
	.img{
	    width: 200rpx;
	    height: 280rpx;
	    margin-right:20rpx ;
	    border-radius: 10rpx;
	    overflow: hidden;
	}
	.img image{
	    width: 100%;
	    height: 100%;
	}
</style>
